<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>云渲染平台</title>
  <link rel="stylesheet" href="css/style.css">
  <!-- Vue 3 & Element Plus -->
  <script src="./public/vue.global.prod.js"></script>
  <!-- 引入 Element Plus -->
  <link rel="stylesheet" href="./public/element-plus-index.css">
  <script src="./public/index.full.js"></script>
  <link rel="stylesheet" href="./public/icon.css" />
  <!-- ECharts -->
  <script src="./public/echarts.min.js"></script>
  <script src="./public/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <el-container style="height: 100vh;">
      <!-- 侧边栏 -->
      <el-aside width="220px" style="background:rgb(84, 92, 100);position:relative;">
        <div style="padding: 24px 0 12px 32px; color: #fff; font-size: 20px;">
          LR云渲染
        </div>
        <el-menu :default-active="currentMenu" class="el-menu-vertical-demo" background-color="rgb(84, 92, 100)"
          text-color="#fff" active-text-color="#ffd04b" @select="switchMenu" :unique-opened="true">
          <el-sub-menu index="datacenter">
            <template #title>
              <span>数据中心</span>
            </template>
            <el-menu-item index="resource">资源监控</el-menu-item>
            <!-- <el-menu-item index="usage">使用统计</el-menu-item>
          <el-menu-item index="client">客户端异常统计</el-menu-item> -->
          </el-sub-menu>
          <el-menu-item index="app">应用管理</el-menu-item>
          <el-menu-item index="appReserve">预启动管理</el-menu-item>
          <el-menu-item index="sysUser">用户管理</el-menu-item>
          <el-menu-item index="process">进程管理</el-menu-item>
          <el-menu-item index="settings">参数设置</el-menu-item>
        </el-menu>
        <div style="position:absolute;bottom:24px;left:32px;font-size:12px;color:#ccc;">
          版本号: 1.0<br>授权方式: 开发版
        </div>
      </el-aside>
      <!-- 主体 -->
      <el-container>
        <el-header
          style="background:rgb(84, 92, 100);display:flex;justify-content:space-between;align-items:center;color: #fff;">
          <div style="font-size: 20px; color: #fff;"></div>
          <div>
            <el-dropdown>
              <span class="el-dropdown-link"
                style="cursor:pointer;color: #fff;display: inline-flex;align-items: center;">
                欢迎：{{ userName }}
                <el-icon style="margin-left: 4px;color: #fff;">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="changePassword">修改密码</el-dropdown-item>
                  <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <!-- <span>&nbsp;|&nbsp; 中文</span> -->
          </div>
        </el-header>
        <el-main style="padding:0;">
          <iframe :src="iframeSrc" style="width:100%;height:calc(100vh - 65px);border:0;"></iframe>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="修改密码" v-model="showPwdDialog" width="400px">
      <el-form :model="pwdForm" label-width="80px">
        <el-form-item label="原密码">
          <el-input v-model="pwdForm.originPassword" type="password" show-password autocomplete="off" />
        </el-form-item>
        <el-form-item label="新密码">
          <el-input v-model="pwdForm.newPassword" type="password" show-password autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showPwdDialog = false">取消</el-button>
        <el-button type="primary" :loading="pwdLoading" @click="submitPassword">确定</el-button>
      </template>
    </el-dialog>
  </div>
  <script>
    // if (!sessionStorage.getItem('token')) {
    //   window.location.href = 'login.html'
    // }
    const { createApp, ref, computed } = Vue
    const { ElMessage } = ElementPlus
    createApp({
      setup () {
        const currentMenu = ref('resource')
        const menuMap = {
          resource: 'resource.html',
          usage: 'usage.html',
          client: 'client.html',
          app: 'app.html',
          sysUser: 'sysUser.html',
          appReserve: 'appReserve.html',
          process: 'process.html',
          settings: 'settings.html'
        }
        const showPwdDialog = ref(false)
        const pwdForm = ref({
          originPassword: '',
          newPassword: ''
        })
        const pwdLoading = ref(false)
        const userName = sessionStorage.getItem('userName')

        const iframeSrc = computed(() => menuMap[currentMenu.value])
        function getToken () {
          return sessionStorage.getItem('token')
        }
        function removeToken () {
          sessionStorage.removeItem('token')
        }

        function switchMenu (menu) {
          currentMenu.value = menu
        }

        function logout () {
          const token = getToken()
          axios.post('/logout', {}, {
            headers: {
              'Authorization': token
            }
          })
            .then(res => {
              const data = res.data
              if (data.status === 'OK' && data.entity === true) {
                sessionStorage.removeItem('token')
                sessionStorage.removeItem('userName')
                location.href = 'login.html'
              } else {
                ElMessage.error('退出登录失败')
              }
            })
            .catch(() => {
              ElMessage.error('网络错误，退出登录失败')
            })
        }

        function changePassword () {
          showPwdDialog.value = true
          pwdForm.value.originPassword = ''
          pwdForm.value.newPassword = ''
        }

        function submitPassword () {
          const token = getToken()
          if (!pwdForm.value.originPassword || !pwdForm.value.newPassword) {
            ElMessage.error('请填写完整')
            return
          }
          pwdLoading.value = true
          axios.put('/user/password', {
            originPassword: pwdForm.value.originPassword,
            newPassword: pwdForm.value.newPassword
          }, {
            headers: {
              'Content-Type': 'application/json',
              'Authorization': token
            }
          })
            .then(res => {
              pwdLoading.value = false
              const data = res.data
              if (data.status === 'OK' && data.entity === true) {
                ElMessage.success('修改成功，请重新登录')
                showPwdDialog.value = false
                logout()
              } else {
                ElMessage.error('修改失败')
              }
            })
            .catch(() => {
              pwdLoading.value = false
              ElMessage.error('网络错误，修改失败')
            })
        }

        return {
          currentMenu,
          menuMap,
          showPwdDialog,
          pwdForm,
          pwdLoading,
          iframeSrc,
          switchMenu,
          logout,
          changePassword,
          submitPassword,
          userName
        }
      }
    })
      .use(ElementPlus)
      .mount('#app');
  </script>
</body>

</html>